<template>
	<div>
		<el-card class="layout-search-card mb-4" shadow="never" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="区域名称：">
					<el-input v-model="state.queryParams.name" placeholder="请输入区域名称" class="w-180"> </el-input>
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="getTableList"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetTableList" class="ml15"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="!border-none p-5" shadow="never" :body-style="{ padding: 0 }">
			<el-button type="primary" v-auth="'setting/area/add'" class="mb-4" @click="handleAddCate({})"> 添加区域 </el-button>
			<el-button class="mb-4" @click="handleExpand"> 展开/折叠 </el-button>
			<el-table ref="tableRef" :data="state.tableList" v-loading="state.loading" row-key="id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column prop="name" label="区域名称" show-overflow-tooltip min-width="120" />
				<el-table-column prop="code" label="区域编码" show-overflow-tooltip min-width="120" />
				<el-table-column label="操作" show-overflow-tooltip min-width="140">
					<template #default="{ row }">
						<el-button size="small" v-auth="'setting/area/add'" text type="primary" @click="handleAddCate(row)">添加</el-button>
						<el-button size="small" v-auth="'setting/area/edit'" text type="primary" @click="handleEditCate(row)">编辑</el-button>
						<el-button size="small" v-auth="'setting/area/delete'" text type="primary" @click="handleDelCate(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<areaDialog v-if="showDialog" ref="cateDialogRef" @submit="getTableList()" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="dataArea">
import { ref, onMounted, reactive, nextTick } from 'vue';
import { areaLists, areaDelete } from '/@/api/setting/area';
import { messageBox } from '/@/utils/message';
import areaDialog from '/@/views/setting/data/component/areaEdit.vue';

const cateDialogRef = ref();

const tableRef = ref();

const showDialog = ref(false);

const state = reactive({
	loading: true,
	isExpand: false,
	tableList: [],
	queryParams: {
		name: '',
	},
});

// 获取区域列表
const getTableList = async () => {
	let res = await areaLists(state.queryParams);
	state.tableList = res;
	state.loading = false;
};

// 重置查询
const resetTableList = async () => {
	state.queryParams.name = '';
	getTableList()
}

// 添加区域
const handleAddCate = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		cateDialogRef.value?.setFormPid(row);
		cateDialogRef.value?.open('add');
	});
};

// 编辑区域
const handleEditCate = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		cateDialogRef.value?.setFormData(row, () => {
			cateDialogRef.value?.open('edit');
		});
	});
};

// 删除区域
const handleDelCate = async (id: number) => {
	messageBox(`确定要删除区域吗？`).then(async () => {
		await areaDelete({ id: id });
		getTableList();
	});
};

// 区域展开折叠
const handleExpand = () => {
	state.isExpand = !state.isExpand;
	toggleExpand(state.tableList, state.isExpand);
};

const toggleExpand = (item: any[], isEx = true) => {
	for (const key in item) {
		tableRef.value?.toggleRowExpansion(item[key], isEx);
		if (item[key]?.children) {
			toggleExpand(item[key].children!, isEx);
		}
	}
};

onMounted(() => {
	getTableList();
});
</script>
